<template>
    <div class="clearfix addDangan">
        <section class="content-header">
            大用户档案管理&nbsp;/&nbsp;档案管理&nbsp;/&nbsp;修改档案
        </section>

        <div class="col-md-12" style="margin-top:50px;">
            <form class="form-horizontal">
                <div class="clearfix">
                    <div class="col-md-4">
                        <div class="box-body">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">用户编号：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" placeholder="输入用户编号" v-model="form.userNum" @blur="isRepeat">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">用户名称：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" placeholder="输入用户名称" v-model="form.userName">
                                </div>
                            </div>
                            <yonghu-type v-model="form.userType" />
                            <hangye v-model="form.businessType" />
                            <div class="form-group">
                                <label class="col-sm-4 control-label">企业投产年份：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" placeholder="输入企业投产年份" v-model="form.productionTime">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-4 control-label">节水型企业：</label>
                                <div class="col-md-8">
                                    <select class="form-control select2" style="width: 100%;" v-model="form.conserLevel">
                                        <option value="" selected>全部</option>
                                        <option v-for="lst in enterpriseList" :value="lst.value" :key="lst.value">{{lst.name}}</option>
                                    </select>
                                </div>
                            </div>
                            <yingyesuo v-model="form.deptId" />
                            <pianqu v-model="form.areaId" :areaId="form.deptId"/>
                            <yongshui-type v-model="form.waterType" />
                            <div class="form-group">
                                <label class="col-md-4 control-label">位置：</label>
                                <div class="col-md-8">
                                    <i class="fa fa-map" aria-hidden="true" style="margin-top:10px;cursor: pointer;"></i>
                                </div>
                            </div>
                            <div class="form-group xingzhi">
                                <label class="col-md-4 control-label">性质：</label>
                                <div class="col-md-1">
                                </div>
                                <div class="col-md-2">
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="xingzhi" value="长期" v-model="form.userPro">
                                            长期
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="xingzhi" value="阶段性" v-model="form.userPro">
                                            阶段性
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="xingzhi" value="临时" v-model="form.userPro">
                                            临时
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="box-body">
                            <div class="form-group">
                                <span class="error">

                                    <span v-if="form.userNum=='' && userNumBtn"><i class="fa fa-times-circle" aria-hidden="true"></i> 请输入用户编号</span>
                                    <span style="color:#42d827" v-if="userNumStatus==0 && form.userNum!=''"><i class="fa fa-check-circle-o" aria-hidden="true"></i>用户编号可用</span>
                                    <span v-if="userNumStatus=='1'"><i class="fa fa-times-circle" aria-hidden="true"></i> 用户编号已存在</span>
                                </span>
                            </div>
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.userName && !form.userName) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请输入用户名称</span>
                            </div>
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.userType && !form.userType) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择用户类型</span>
                            </div>
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.businessType && !form.businessType) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择行业</span>
                            </div>
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.time && !form.time) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> </span>
                            </div>
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.conserLevel && !form.conserLevel) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择节水型企业</span>
                            </div>
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.areaId && !form.areaId) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择片区</span>
                            </div>
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.deptId && !form.deptId) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择营业所</span>
                            </div>
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.waterType && !form.waterType) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择用水类型</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="box-body">
                            <div class="form-group">
                                <label class="col-md-2 control-label">监测点个数：</label>
                                <div class="col-md-2">
                                    <select class="form-control select2" style="width: 100%;" v-model="form.userMonitornum">
                                        <option value="1" selected>1</option>
                                        <option value="3" selected>3</option>
                                        <option value="2" selected>2</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">监测点描述：</label>
                                <div class="col-sm-8">
                                    <textarea class="form-control" rows="6" placeholder="请输入描述" maxlength="80" v-model="form.monitorDes"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">仪表管理：</label>
                                <div class="col-sm-8 tablebox">
                                    <table id="example" class="table table-bordered table-hover">
                                        <thead style="font-weight:700">
                                            <tr>
                                                <td><input type="checkbox" ref="shuaxin" :checked="form.infoList.length===deleteId.length && deleteId.length" @click="checkedAll"></td>
                                                <td>名称</td>
                                                <td>型号</td>
                                                <td>使用时间</td>
                                                <td>年限</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="item in form.infoList" :key="item.value">
                                                <td><input type="checkbox" :checked="deleteId.indexOf(item.insId)>=0" name="checkboxinput" class="input-checkbox" @click="checkedOne(item.insId)"></td>
                                                <td><input type="text" placeholder="单行输入" v-model="item.insName"></td>
                                                <td><input type="text" placeholder="单行输入" v-model="item.insVer"></td>
                                                <td><input type="text" placeholder="单行输入" v-model="item.useTime"></td>
                                                <td><input type="text" placeholder="单行输入" v-model="item.age"></td>
                                            </tr>
                                            <tr>
                                                <td></td>
                                                <!-- <td colspan="6"><span style="cursor: pointer;">添加一行</span><span style="cursor: pointer;">删除</span></td> -->
                                                <td><span style="cursor: pointer;" @click="addItem"><i class="fa fa-plus-circle" aria-hidden="true"></i>&nbsp;添加一行</span></td>
                                                <td><span style="cursor: pointer;" @click="deleteItem"><i class="fa fa-minus-circle" aria-hidden="true"></i>&nbsp;删除</span></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin-top:100px">
                    <div class="col-md-1 col-md-offset-4">
                        <button type="button" class="btn btn-block btn-primary" @click="updateBiguser">修改</button>
                    </div>
                    <div class="col-md-1 col-md-offset-1">
                        <button type="button" class="btn btn-block btn-default" data-toggle="modal" data-target="#myModal">取消</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span></button>
                        <h4 class="modal-title">返回</h4>
                    </div>
                    <div class="modal-body">
                        <p>确定返回档案管理页面吗？</p>
                    </div>
                    <div class="modal-footer">
                        <!-- <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button> -->
                        <button type="button" class="btn btn-primary" data-dismiss="modal" @click="$router.push({path:'da-index'})">确定</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
        </div>
    </div>
</template>

<script>
import utils from "@/utils/index"

import pianqu from "@/components/common/area.vue";
import hangye from "@/components/common/hangye.vue";
import yingyesuo from "@/components/common/yingyesuo.vue";
import yonghuType from "@/components/common/yonghuType.vue";
import yongshuiType from "@/components/common/yongshuiType.vue";


export default {
    data() {
        return {
            insIdnum: 0,
            enterpriseList: [],
            form: {
                areaId: '',
                deptId: '',
                userNum: '',
                userName: '',
                userType: '',
                businessType: '',
                time: '',
                conserLevel: '',
                userPro: '长期',
                userMonitornum: '',
                monitorDes: '',
                waterType: '',
                userX: '',
                userY: '',
                infoList: [{
                    insId: 0,
                    userNum: '',
                    insName: '',
                    insVer: '',
                    useTime: '',
                    age: '',
                    insType: '',
                }]
            },
            deleteId: [],
            deleteList: '',
            isCheckedAll: false,
            valid: {
                userNum: false,
                userName: false,
                userType: false,
                businessType: false,
                time: false,
                conserLevel: false,
                areaId: false,
                deptId: false,
                waterType: false,
            },
            userNumStatus: -1,
            userNumBtn: false
        }
    },
    components: {
        pianqu, hangye, yingyesuo, yonghuType, yongshuiType

    },
    mounted() {
        this.getList()
        this.getEnterpriseList()
    },
    watch: {
        //根据删除的行的id加入list
        'deleteId'() {
            this.deleteList = '';
            this.deleteId.forEach(item => {
                this.deleteList += `${item},`;
            });
            this.deleteList = this.deleteList.substr(0, this.deleteList.length - 1);
        }
    },
    methods: {
        //获取节水型企业列表
        getEnterpriseList() {
            this.$api.biguser.enterprise().then(res => {
                if (res.success) {
                    // console.log(res.data)
                    this.enterpriseList = res.data
                }
            });
        },
        //修改档案
        updateBiguser() {
            if (this.form.userNum == "" || this.userNumStatus == 1) {
                this.userNumBtn = true;
            } else if (this.form.userName == "") {
                this.valid.userName = true;
            } else if (this.form.userType == "") {
                this.valid.userType = true;
            } else if (this.form.businessType == "") {
                this.valid.businessType = true;
            } else if (this.form.conserLevel == "") {
                this.valid.conserLevel = true;
            } else if (this.form.areaId == "") {
                this.valid.areaId = true;
            } else if (this.form.deptId == "") {
                this.valid.deptId = true;
            } else if (this.form.waterType == "") {
                this.valid.waterType = true;
            } else {
                this.$api.biguser.upbiguser(this.form).then(res => {
                    if (res.success) {
                        // console.log(res.data)
                        this.$$message({
                            message: "恭喜您，修改成功！",
                            type: "success"
                        });
                        this.$router.push({ path: "da-index" });
                    }
                });
            }

        },
        //表格增添操作
        addItem() {
            this.insIdnum++
            let obj = {
                insId: this.insIdnum,
                userNum: '',
                insName: '',
                insVer: '',
                useTime: '',
                age: '',
                insType: '',
            }
            this.form.infoList.push(obj)
        },
        //是否选择
        checkedOne(id) {
            let idIndex = this.deleteId.indexOf(id)
            if (idIndex >= 0) {//如果已经包含就去除
                this.deleteId.splice(idIndex, 1)
            } else {//如果没有包含就添加
                this.deleteId.push(id)
            }
        },
        //控制全选按钮
        checkedAll(e) {
            this.isCheckedAll = e.target.checked;
            if (this.isCheckedAll) {//全选时
                this.deleteId = []
                this.form.infoList.forEach(item => {
                    this.deleteId.push(item.insId)
                })
            } else {
                this.deleteId = []
            }
        },
        //表格删除操作
        deleteItem() {
            for (var j in this.deleteList) {
                for (var i = 0; i < this.form.infoList.length; i++) {
                    if (this.form.infoList[i].insId == this.deleteList[j])
                        this.form.infoList.splice(i, 1);
                }
            }
            this.$refs.shuaxin.click()
            this.$refs.shuaxin.click()
        },
        //判断编号是否存在
        isRepeat() {
            this.userNumBtn = true
            this.$api.biguser.isUserNum({
                userNum: this.form.userNum
            }).then(res => {
                if (res.success) {
                    // console.log(res);
                    this.userNumStatus = res.data
                }
            });
        },
        //获取详情列表
        getList() {
            this.$api.biguser.userdetail({
                userNum: this.$route.query.userNum
            }).then(res => {
                if (res.success) {
                    this.form = res.data
                }
            });
        },
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
